
<style scoped lang="less">
 @import "filePreview.less";
</style>
<template>
        <Modal v-model="imgModel" width="800px" :footer-hide="true" :open-img-model="imgModel=true" @on-cancel="cancel" title="预览" class="model" draggable :styles="{top:'30px'}">
            <div class="imgPreview">
                <div class="magnify-content">
                    <div class="magnify-img overflow">
                        <div class="preview_img">
                                <!-- <img v-if="showType=='img'" ref="previewImg" :src="previewImgSrc" @mousewheel="rollImg($event)" alt="" >
                                <embed  v-if="showType=='pdf'" ref="pdfPreview" :src="previewImgSrc" width="100%" height="460" style="margin: auto;display: block;" type="application/pdf" /> -->
                                <div class="file-box">
                                    <div class="img" v-if="showType==='img'">
                                        <img
                                            :src="previewFile.imgSrc"
                                            ref="previewImg"
                                            @mousewheel="rollImg($event)"
                                            @mousedown="onImgStart"
                                            @mouseup="onImgStop"
                                            @mousemove="onImgMove"
                                            :style="imgStyle"
                                            alt
                                        />
                                    </div>
                                    <div class="pdf" v-if="showType==='pdf'">
                                        <embed ref="pdfPreview" :src="previewFile.imgSrc" width="100%" height="100%" type="application/pdf" />
                                    </div>
                                    <div class="video" v-if="showType==='video'">
                                        <video controls>
                                            <source :src="previewFile.imgSrc" type="video/mp4" />
                                            <p>Sorry, your browser doesn't support embedded videos.</p>
                                        </video>
                                    </div>
                                </div>
                                <div class="magnify-footer">
                                    <div class="magnify-toolbar">
                                        <Button class="magnify-btn-prev" type="primary" size="small" @click="downPic"  v-if="showType=='img'&&!isSomebtn">下载</Button>
                                        <Button class="magnify-btn-prev" type="primary" size="small" @click="prevPic">上一张</Button>
                                        <Button  class="magnify-btn-next" type="primary" size="small" @click="nextPic">下一张</Button>
                                        <Button  class="magnify-btn-rotateLeft" type="primary" size="small" @click="leftRotate"  v-if="showType=='img'">左旋</Button>
                                        <Button  class="magnify-btn-rotateRight" type="primary" size="small" @click="rightRotate"  v-if="showType=='img'">右旋</Button>
                                        <Button  class="magnify-btn-actualSize" type="primary" size="small" @click="save"  v-if="showType=='img'&&!isSomebtn">保存</Button>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="thum" v-show="thumImgSrc.length > 1" v-if="isShowThumImg">
                    <li v-for="(item,index) in thumImgSrc" :key="index" @click="selectThumImg($event,index,item.type)" :class="{'cur':curIndex==index}"><img :src="item.thumSrc"></li>
                </ul>
            </div>
        </Modal>
</template>
<script>
import { getImgBlogUrl }from "_p/basic/api/image/image-getImgBlogUrl";
import { deepClone } from "@/libs/utils/ObjectClone";
import {revolveFile} from "_p/basic/api/image/image-upload";

export default {
    props: {
        currentIndex:{
            type: Number,
            default: 0,
        },
        isShowThumImg:{
            type: Boolean,
            default: true
        },
        showFileList:{
            type: Array
        },
        path:{
            type:String,
        },
        isSomebtn:{
            type:Boolean
        }
    },
   data(){
       return{
        imgStyle:{},
        imgModel:false,
        previewFile:{},
        previewImgSrc:"",
        previewPdfSrc:"",
        showType:"",
           degree:0,
        curIndex: this.currentIndex,
        totalIndex:0,
        tempStyle:[],
        thumImgSrc:[],
       }
   },
   created(){
       this.thumImgSrc=this.showFileList;
       this.totalIndex=this.thumImgSrc.length-1;

       this.showType=this.getFileType();
        this.setPreviewFile()
       for(let i=0;i<=this.totalIndex;i++){
           let obj={
               deg:0,
               zoom:100

           }
           this.tempStyle.push(obj)
       }
   },
   mounted(){
    //    this.keyupevent();
   },
   methods:{
       init(){

       },
        // 点击键盘时间切换上下张
       keyupevent(){
            let _this=this;
            document.onkeydown=function(event){
                event.preventDefault();
                let keycode=event.keyCode;
                console.log(keycode,"keycode")
                if(keycode==39||keycode==40){
                    _this.nextPic();
                }else if(keycode==37||keycode==38){
                    _this.prevPic();
                }
            }
       },
       rollImg(event){
            event.preventDefault();
            // console.log(event.wheelDelta,"event.wheelDelta")
            // 缩放图片
            this.zoomImg(event.wheelDelta)

       },
        selectThumImg(event,index,type){
            this.curIndex=index;
            this.showType=this.getFileType();
            this.setPreviewFile()
            // console.log(this.curIndex,"this.curIndex")
        },
        // 点击上一张
        prevPic(){
            if(this.curIndex==0){
                // this.curIndex=this.totalIndex;
                this.$Message.warning("已经是第一张了");
            }else{
                this.curIndex--;
                this.showType=this.getFileType();
                this.setPreviewFile()
                this.resetPic();
            }
        },
        // 点击下一张
        nextPic(){
            if(this.curIndex==this.totalIndex){
                // this.curIndex=0;
                this.$Message.warning("已经是最后一张了");
            }else{
                this.curIndex++;
                this.showType=this.getFileType()
                this.setPreviewFile()
                this.resetPic();
            }

        },
        // 重置样式
        resetPic(){
            this.tempStyle[this.curIndex].deg=0;
            this.tempStyle[this.curIndex].zoom=100;
            this.setStyle();
        },
        //左旋转
        leftRotate(){
            this.tempStyle[this.curIndex].deg-=90;
             this.setStyle();
            this.degree=this.tempStyle[this.curIndex].deg;
        },
        // 右旋转
        rightRotate(){
            this.tempStyle[this.curIndex].deg+=90;
            this.setStyle();
            this.degree=this.tempStyle[this.curIndex].deg;
        },
        // 放大
        zoomImg(){
            this.tempStyle[this.curIndex].zoom+= event.wheelDelta / 12;
            // 最大放大屏幕
            if(this.tempStyle[this.curIndex].zoom>=250){
                this.tempStyle[this.curIndex].zoom=250;
            }
            if(this.tempStyle[this.curIndex].zoom<=40){
                this.tempStyle[this.curIndex].zoom=40;
            }
            this.setStyle();
        },
        // 设置图片样式
        setStyle(){
            if(this.showType=="img"){
                let _this=this;
                this.$nextTick(()=>{
                    _this.$refs.previewImg.style.transform="translate(-50%, -50%) rotate("+this.tempStyle[this.curIndex].deg+"deg)";
                    _this.$refs.previewImg.style.zoom=this.tempStyle[this.curIndex].zoom+'%';
                })
            }
        },
        // 设置当前预览文件
        setPreviewFile() {
            // console.log(this.showFileList,this.curIndex);
            if (!this.showFileList.length) return;
            this.previewFile = deepClone(this.showFileList[this.curIndex])

        },
        // 文件类型
        getFileType(){
            let file = this.thumImgSrc[this.curIndex],
                type='';
            if(!file) return type;
            switch(file.fileType){
                case "jpg":
                case "png":
                case "jpeg":
                    type = 'img';
                    break;
                case "pdf":
                    type = 'pdf';
                    break;
                default:
                     type = 'img';
            }
            return type;
        },
        // 取消图片预览弹窗
        cancel(){
            this.$emit("close-img-model",false)
        },
        save(){
           let file=this.thumImgSrc[this.curIndex];
            file.degree=this.degree;
            revolveFile(file,this.path).then(res=>{
                if(res.code === "0000"){
                    this.$Message.success("保存成功！");
                }
            });
        },
        // 下载图片
        downPic(){
            const a = document.createElement('a');
            a.href = this.previewImgSrc;
            a.download = this.thumImgSrc[this.curIndex].fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        },
        onImgStart(e) {
            e.preventDefault();
            if (e.button == 0) {
                this.canDrag = true;
                this.disX = e.clientX - e.target.offsetLeft;
                this.disY = e.clientY - e.target.offsetTop;
            }
        },
        onImgMove(e) {
            if (this.canDrag) {
                let left = e.clientX - this.disX + 'px';
                let top = e.clientY - this.disY + 'px';
                // this.$refs.previewImg.style = `left:${left}px;top:${top}px`;
                this.imgStyle = Object.assign({}, this.imgStyle, { left, top })
            }
        },
        onImgStop() {
            this.canDrag = false;
        },
   }
}
</script>
